<template>
  <div class="treetools" style="width:100%">
    <el-row style="width:100%">
      <el-col :span="20">
        {{ nodeData.name ||'暂无部门' }}
      </el-col>
      <el-col :span="4">
        <el-row :gutter="30">
          <el-col :span="12" style="text-aling:right">{{ nodeData.manager ||'暂无' }}</el-col>
          <el-col :span="12">
            <el-dropdown @command="handleClick">
              <span> 操作<i class="el-icon-arrow-down" /> </span>
              <!-- 下拉菜单 -->
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                <el-dropdown-item v-if="isRoot" command="edit">编辑部分</el-dropdown-item>
                <el-dropdown-item v-if="isRoot" command="del">删除部门</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { reqDelDept } from '@/api/departrents'

export default {
  name: 'TreeTools',
  props: {
    nodeData: {
      type: Object,
      required: true
    },
    // eslint-disable-next-line vue/require-prop-types
    isRoot: {
      tpye: Boolean,
      default: true
    }
  },
  methods: {
    handleClick(command) {
      if (command === 'add') {
        // console.log('nodeData')
        // console.log(this.nodeData)
        this.$emit('showDialog', this.nodeData)
      }
      if (command === 'edit') {
        console.log('edit')
        this.$emit('editDialog', this.nodeData)
      }
      if (command === 'del') {
        this.$confirm('此操作讲永久删除该部门，是否继续', '提示', {
          type: 'warning'
        }).then(async() => {
          await reqDelDept(this.nodeData.id)
          this.$emit('reload')
        }).catch(() => {
          this.$message.info('已取消删除')
        })
      }
    }
  }
}
</script>

<style>

</style>
